<template>
  <div class="main-top">
    <div  v-for="point_data in point_datas" :key="point_data.id">
        <div :class="[point_data.type=='normal'?'normal-point':'warn-point']"  :style="{'top':point_data.top,'left':point_data.left,'z-index':point_data.z_index}">
          <div class="line-space">
              <div :class="[point_data.type=='normal'?'normal-line':'warn-line']" ></div>
              <div :class="[point_data.type=='normal'?'normal-message-space':'warn-message-space']"  :style="{'opacity':point_data.opacity}">
                  <div :class="[point_data.type=='normal'?'normal-message':'warn-message']" >
                      <div :class="[point_data.type=='normal'?'normal-title':'warn-title']"  > {{ point_data.message }}</div>
                      <div :class="[point_data.type=='normal'?'normal-content':'warn-content']" >{{point_data.content}}</div>
                  </div>
              </div>
          </div>
      </div>
    </div>
  </div>
 
</template>
   
    <script>
    
    import { ref, onMounted } from 'vue'
    export default {
      data () {
        return {
            point_datas:
            [
              {id:'1',type:'warn',message:'摄像头掉线',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'2',type:'warn',message:'流体密度大',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'3',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'4',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'5',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'6',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'7',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'8',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'9',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'10',type:'warn',message:'摄像头掉线',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'11',type:'warn',message:'流体密度大',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'12',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'13',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'14',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'15',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'16',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'17',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0},
              {id:'18',type:'normal',message:'流速正常',content:'出坝口 03:28:16',top:0,left:0,opacity:0,z_index:0}
    
            ]
        }
      },
      methods: {
				show(){
          let that = this;
          //给数据随机坐标
          that.point_datas.forEach((point_data)=>{
              let min = 3;
              let max = 42  
              let x = Math.floor(Math.random() * (max - min) ) + min
              point_data.left=x+'rem';
              let min2 =5;
              let max2 = 25  
              let y = Math.floor(Math.random() * (max2 - min2) ) + min2
              point_data.top=y+'rem';
          });
          //给数据顺序展示
          var index = 0;
          
          var isShow =true;
          setInterval(function(){         
            var data_one = that.point_datas[index];
            if(isShow){
              data_one.opacity=data_one.opacity+0.1;
              data_one.z_index=999
              if(data_one.opacity>=1){
                isShow=false;
              }
            }else{
              data_one.opacity=data_one.opacity-0.1;
              if(data_one.opacity<=0){
                data_one.z_index=30
                isShow=true;
                index++;
                if(index>=that.point_datas.length){
                  data_one.z_index=0
                  index=0;
                }
              }
            }         
          },100);
           
        


				}
      },
      created(){
        // 1.created生命周期函数中可以调用data中的方法和methods中的数据
    
        this.show();

      },
      setup() {
        const root = ref(null)
        // mounted
        onMounted(() => {
        }
      )
        return {
            root,
         
          }
      }
     }
    </script>

  <style lang="less">
  .main-top{
    width: 58rem;
    height: 42.5rem;
    margin: 0 1rem ;

    position: relative;
  }

  .line-space{
    width:0.4rem;
    height: 17em;
    position: relative;
  }
  .warn-point{
      width:6.2rem;
      height: 6.2em;
      background-image: url('../assets/images/u197.svg');
      position: absolute;
      top:33rem;
      left:10rem;

  }
  .normal-point{
      width:6.2rem;
      height: 6.2em;
      background-image: url('../assets/images/u201.svg');
      position: absolute;
      top:15rem;
      left:38rem;

  }


  .warn-line{
    background-image: url('../assets/images/u143.svg');
    left:2.8rem;
    top:2.8rem;
    width:0.4rem;
    height: 15em;
    position: absolute;

  }

  .normal-line{
    background-image: url('../assets/images/u140.svg');
    left:2.8rem;
    top:2.8rem;
    width:0.4rem;
    height: 15em;
    position: absolute;

  }
  .warn-message-space{
    width: 13rem;
    height: 6rem;
    left:2.8rem;
    top:-2.6rem;

    position: relative;
    background-image: url('../assets/images/数据项一_u209.svg');
  }
  .warn-message{

    width: 11rem;
    height: 6rem;
    position: absolute;
    line-height: 30px;
    left:1.8rem;
    top:1.8rem;
    
    .warn-title{
      font-size: 28px;
      font-family:'DINPro', sans-serif;
      font-weight:400;
      color:#FFD200;
    }
    .warn-content{
      font-size: 14px;
      font-family:'微软雅黑', sans-serif;
      font-weight:400;
      color:rgba(255, 255, 255, 0.8)
    }
    
  }
  .normal-message-space{
    width: 13rem;
    height: 6rem;
    left:1.8rem;
    top:-2.6rem;

    position: relative;
    background-image: url('../assets/images/数据项二_u210.svg');
  }
  .normal-message{
    width: 11rem;
    height: 6rem;
    position: absolute;
    line-height: 30px;
    left:1.8rem;
    top:1.8rem;
    .normal-title{
      font-size: 28px;
      font-family:'DINPro', sans-serif;
      font-weight:400;
      color:#10EA8C;
    }
    .normal-content{
      font-size: 14px;
      font-family:'微软雅黑', sans-serif;
      font-weight:400;
      color:rgba(255, 255, 255, 0.8)
    }
    
  }
</style>